<template>
	<div :id="id" :style="{width:width+'px',height:height+'px',margin:'34px auto'}" class="m-map"></div>
</template>
<script type="text/javascript">
export default{
	name:"",
	data(){
		return{
			id:`map`,
			key:'472fec026a2a15294548bd982a264dfb'
		}
	},
	props:{
		width:{
			type:Number,
			default:300
		},
		height:{
			type:Number,
			default:300
		},
		point:{
			type:Array,
			default(){
				return [116.46,39.92]
			}
		}
	},
	created(){
		
	},
	watch:{
		point: function(val, old) {
			this.map.setCenter(val)
			this.marker.setPosition(val)
		}
	},
	mounted(){
		let self = this;
		self.id = `map${Math.random().toString().slice(4,6)}`
		
		window.onmaploaded = ()=>{
			let map = new window.AMap.Map(self.id,{
				resiaeEnable:true,
				zoom:11,
				center:self.point
			})
			self.map = map
			window.AMap.plugin('AMap.ToolBar',()=>{
			      let toolbar = new window.AMap.ToolBar();
			      map.addControl(toolbar);
			      let marker = new window.AMap.Marker({
			      	icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
			      	position:self.point
			      })
			      self.marker = marker
			      marker.setMap(map)
			      
			  });
		}
		const url = `https://webapi.amap.com/maps?v=1.4.10&key=${self.key}&callback=onmaploaded`;
		let jsapi = document.createElement('script');
		jsapi.charset = 'utf-8';
		jsapi.src = url;
		document.head.appendChild(jsapi);
	},
	methods:{},
	computed:{},
	components:{}
}
</script>
<style scoped>

</style>